<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <el-carousel height="400px" class="banner">
      <el-carousel-item v-for="item in bannerList" :key="item.title">
        <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 服务介绍 -->
    <div class="section service-section">
      <h2 class="section-title">我们的服务</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="service in serviceList" :key="service.title">
          <el-card class="service-card" shadow="hover">
            <el-icon class="service-icon" :size="40">
              <component :is="service.icon" />
            </el-icon>
            <h3>{{ service.title }}</h3>
            <p>{{ service.desc }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最新资讯 -->
    <div class="section news-section">
      <h2 class="section-title">最新资讯</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="news in newsList" :key="news.id">
          <el-card class="news-card" shadow="hover" @click="handleNewsClick(news)">
            <img :src="news.image" class="news-image" />
            <div class="news-content">
              <h3>{{ news.title }}</h3>
              <p>{{ news.content }}</p>
              <div class="news-footer">
                <span>{{ news.date }}</span>
                <el-button type="text" size="small">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 心理医生 -->
    <div class="section doctor-section">
      <h2 class="section-title">专业医师</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="doctor in doctorList" :key="doctor.id">
          <el-card class="doctor-card" shadow="hover" @click="handleDoctorClick(doctor)">
            <img :src="doctor.avatar" class="doctor-avatar" />
            <h3>{{ doctor.name }}</h3>
            <p class="doctor-title">{{ doctor.title }}</p>
            <p class="doctor-desc">{{ doctor.description }}</p>
            <el-button type="primary" size="small">预约咨询</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Calendar,
  ChatLineRound,
  DocumentChecked
} from '@element-plus/icons-vue'

const router = useRouter()

// 轮播图数据
const bannerList = ref([
  {
    title: '专业心理咨询',
    desc: '提供专业的心理咨询服务，帮助您解决心理困扰',
    image: 'https://img.freepik.com/free-photo/psychologist-consulting-with-patient_23-2149167227.jpg'
  },
  {
    title: '心理健康评估',
    desc: '全面的心理健康评估，了解自己的心理状态',
    image: 'https://img.freepik.com/free-photo/psychologist-consulting-with-patient_23-2149167228.jpg'
  },
  {
    title: '在线心理咨询',
    desc: '便捷的在线咨询服务，随时随地解决问题',
    image: 'https://img.freepik.com/free-photo/psychologist-consulting-with-patient_23-2149167229.jpg'
  }
])

// 服务介绍数据
const serviceList = ref([
  {
    icon: 'ChatLineRound',
    title: '在线咨询',
    desc: '提供便捷的在线咨询服务，专业医师在线解答'
  },
  {
    icon: 'Calendar',
    title: '预约面询',
    desc: '可预约线下面对面咨询，更好地解决心理问题'
  },
  {
    icon: 'DocumentChecked',
    title: '心理测评',
    desc: '专业的心理测评量表，了解自己的心理状态'
  }
])

// 最新资讯数据
const newsList = ref([
  {
    id: 1,
    title: '如何缓解压力？',
    content: '压力管理的几个实用技巧...',
    image: 'https://img.freepik.com/free-photo/young-woman-feeling-stressed-work_23-2149069747.jpg',
    date: '2024-03-12'
  },
  {
    id: 2,
    title: '改善睡眠质量',
    content: '提高睡眠质量的建议...',
    image: 'https://img.freepik.com/free-photo/young-woman-suffering-from-insomnia_23-2149069748.jpg',
    date: '2024-03-11'
  },
  {
    id: 3,
    title: '情绪管理指南',
    content: '学会控制自己的情绪...',
    image: 'https://img.freepik.com/free-photo/young-woman-feeling-anxious_23-2149069749.jpg',
    date: '2024-03-10'
  }
])

// 心理医生数据
const doctorList = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    description: '从事心理咨询20年，擅长处理情感问题',
    avatar: 'https://img.freepik.com/free-photo/doctor-with-his-arms-crossed-white-background_1368-5790.jpg'
  },
  {
    id: 2,
    name: '李医生',
    title: '副主任医师',
    description: '专注青少年心理健康，经验丰富',
    avatar: 'https://img.freepik.com/free-photo/doctor-with-his-arms-crossed-white-background_1368-5791.jpg'
  },
  {
    id: 3,
    name: '王医生',
    title: '心理咨询师',
    description: '擅长处理焦虑抑郁等心理问题',
    avatar: 'https://img.freepik.com/free-photo/doctor-with-his-arms-crossed-white-background_1368-5792.jpg'
  },
  {
    id: 4,
    name: '刘医生',
    title: '心理治疗师',
    description: '专注婚姻家庭心理咨询',
    avatar: 'https://img.freepik.com/free-photo/doctor-with-his-arms-crossed-white-background_1368-5793.jpg'
  }
])

// 点击新闻卡片
const handleNewsClick = (news) => {
  router.push(`/news/${news.id}`)
}

// 点击医生卡片
const handleDoctorClick = (doctor) => {
  router.push(`/doctors/${doctor.id}`)
}
</script>

<style lang="scss" scoped>
.home-container {
  .banner {
    margin-bottom: 40px;

    .banner-item {
      height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
      }
      
      .banner-content {
        position: relative;
        padding: 0 20%;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        
        h2 {
          font-size: 2.5em;
          margin-bottom: 20px;
          font-weight: 600;
        }
        
        p {
          font-size: 1.2em;
          opacity: 0.9;
        }
      }
    }
  }

  .section {
    padding: 40px 0;

    .section-title {
      text-align: center;
      margin-bottom: 30px;
      color: #303133;
    }
  }

  .service-section {
    background: #f5f7fa;

    .service-card {
      text-align: center;
      padding: 30px;

      .service-icon {
        color: #409EFF;
        margin-bottom: 20px;
      }

      h3 {
        margin: 15px 0;
        color: #303133;
      }

      p {
        color: #606266;
      }
    }
  }

  .news-section {
    .news-card {
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      }
      
      .news-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
      }

      .news-content {
        padding: 15px;

        h3 {
          margin: 0 0 10px;
          font-size: 18px;
        }

        p {
          color: #606266;
          margin-bottom: 15px;
        }

        .news-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #909399;
        }
      }
    }
  }

  .doctor-section {
    background: #f5f7fa;

    .doctor-card {
      text-align: center;
      padding: 20px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      }

      .doctor-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-bottom: 15px;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      h3 {
        margin: 0 0 5px;
        color: #303133;
      }

      .doctor-title {
        color: #409EFF;
        margin-bottom: 10px;
      }

      .doctor-desc {
        color: #606266;
        margin-bottom: 15px;
        height: 40px;
        overflow: hidden;
      }
    }
  }
}
</style> 